<template>
    <div id="outDiv">
        <h1>待办事项</h1>
        <input type="text" id="userInput" placeholder="请输入您的代办事项,回车后即可添加呦" v-model="todoContent"
            @keydown.enter="btnAdd()" @input="btnInput()">
        <span v-show="showStatus">最多输入50个字符串哦!</span>
        <div class="contentDiv">
            <div class="list">
                <span @click="findMonth()">近一个月</span>
                <span @click="findWeek()">本周</span>
                <span @click="findYear()">近一年</span>
                <span @click="findToday()">今天</span>
            </div>
            <p v-for="(item, index) of todoList"
                :class="{ 'todo': item.statue === false, 'doit': item.statue === true, 'unclick': item.statue === true }"
                :key="index" @mouseenter="btnEnter(index)" @mouseleave="btnLeave(index)">
                <input type="checkbox" :value="item.name" v-model="item.statue" @click="btnChange(index)"
                    :checked="item.statue === true">{{
                        item.name }}
                <span v-if="item.show" class="del" @click="btnDel(index)">删除</span>
                <br>
                <hr style="border: 1px dashed gray">
            </p>
        </div>
        <div class="down">
            <div style="margin-left: 1%;">
                <span>总计 {{ todoList.length }}</span>
            </div>
            <div style="display: flex;justify-content: space-around;width: 190px;margin-right: 1%;">
                <span @click="btnAll()">全部</span>
                <span @click="btnToDo()">未完成</span>
                <span @click="btnFinish()">已完成</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
// 定义用户输入的值
let todoContent = ref('')
// 将代办数组的数组重新赋值给一个临时数组 没有数据的时候为空数组 定义为响应式数据
let items = ref(JSON.parse(localStorage.getItem('things')) || [])
// 自动记录时间
let time = new Date()
// 定义本周状态
let weekStatus = false
// 提示词状态
let showStatus = ref(false)
// // 定义初始状态
// let fileT = ref('All')
// // 定义计算属性
// let todoList = computed(() => {
//     if (fileT.value === 'ToDo') {
//         return items.value.filter(item => item.statue === false)
//     } else if (fileT.value === 'Do') {
//         return items.value.filter(item => item.statue === true)
//     } else {
//         return items.value = items.value
//     }
// })

// 检查字符串长度并排空
function btnInput() {
    let contentLength = todoContent.value.length

    if (contentLength > 5) {
        showStatus.value = true
    } else {
        showStatus.value = false
    }
}
// 添加代办事件功能
function btnAdd() {
    let content = todoContent.value
    if (content === '') {
        alert('请输入待办内容')
        return;
    }
    // 将代办对象封装成一个对象
    let listObject = {
        // 代办内容
        name: todoContent.value,
        // 代办状态
        statue: false,
        // 删除显示状态
        show: false,
        // 事件事件
        time
    }
    // 测试数据
    let testData = {
        // 代办内容
        name: '我是测试数据',
        // 代办状态
        statue: false,
        // 删除显示状态
        show: false,
        // 事件事件
        time: '2023-05-01T15:48:13.732Z'
    }
    // 将用户的代办事件添加到数组中
    items.value.push(listObject)
    // items.value.push(testData)
    // 用户按回车之后清除输入框内容 方便下一次输入
    todoContent.value = ''
    // 将代办数组存储为本地存储
    localStorage.setItem('things', JSON.stringify(items.value))
}
// 修改事件状态的功能
function btnChange(id) {
    // 完成的代办事项状态设置为true
    items.value[id].statue = !items.value[id].statue
    // 确保用户点击完成事件的时候避免和鼠标进入事件重合导致删除会出现
    items.value[id].show = false
    // 将修改过得存储数组上传到本地存储
    localStorage.setItem('things', JSON.stringify(items.value))
}
// 用户点到对应事件显示删除功能
function btnEnter(id) {
    // 修改删除显示状态
    items.value[id].show = true
}
// 用户点到对应事件不显示删除功能
function btnLeave(id) {
    // 修改删除显示状态
    items.value[id].show = false
}
// 用户删除功能
function btnDel(id) {
    let idx = parseInt(id)
    if (weekStatus) {
        if (confirm('确认删除该事项吗?')) {
            items.value.splice(id, 1)
            // 将删除过后的数据上传到本地存储
            localStorage.setItem('weeks', JSON.stringify(items.value))
        } else {
            return null
        }
    } else {
        if (confirm('确认删除该事项吗?')) {
            items.value.splice(idx, 1)
            // 将删除过后的数据上传到本地存储
            localStorage.setItem('things', JSON.stringify(items.value))
        } else {
            return null
        }
    }
}
// 显示全部事件
function btnAll() {
    weekStatus = false
    items.value = JSON.parse(localStorage.getItem('things'))

}
// 显示未完成事件
function btnToDo() {
    items.value = JSON.parse(localStorage.getItem('things'))
    // 用事件的状态进行过滤
    let toDoList = items.value.filter(item => item.statue === false)
    // 将过滤好的数组重新赋值给 items
    items.value = toDoList
}
// 显示已完成事件
function btnFinish() {
    items.value = JSON.parse(localStorage.getItem('things'))
    // 用事件的状态进行过滤
    let toDoList = items.value.filter(item => item.statue === true)
    // 将过滤好的数组重新赋值给 items
    items.value = toDoList
}

// 查询近一个月的事件
function findMonth() {
    // 重新读取数据
    items.value = JSON.parse(localStorage.getItem('things'))
    // 临时数组
    let tmpArr = []
    // 获取当前月份
    let thisMonth = new Date().getMonth() + 1
    // 测试处理数据加零
    if (thisMonth < 10) {
        thisMonth = `0${thisMonth}`
    } else {
        thisMonth = new Date().getMonth() + 1
    }
    // 获取当前年份
    let thisYear = new Date().getFullYear()
    // 根据月份对代办事项数组进行筛选
    items.value.forEach(item => {
        // 获取用户记录该事项时的年份
        let remberYear = item.time.split('-')[0]
        // 获取用户记录该事项时的月份
        let remberMonth = item.time.split('-')[1]
        if (remberYear === thisYear.toString() && remberMonth === thisMonth.toString()) {
            // 符合条件的数据添加到临时数组
            tmpArr.push(item)
        }
        // 将临时数组赋值给items
        items.value = tmpArr
    })
    localStorage.setItem('weeks', JSON.stringify(tmpArr))
    items.value = JSON.parse(localStorage.getItem('years'))
}
// 查询本周的事件
function findWeek() {
    // 重新读取数据
    items.value = JSON.parse(localStorage.getItem('things'))
    /**
     * 1.先拿当前是星期几
     * 2.获取今天星期几的日期
     * 3.根据今天星期几的日期来推这一周的数据
     */
    // 改变本周状态
    weekStatus = true
    // 临时数组
    let tmpArrWeek = []
    // 实例日期对象
    let date = new Date()
    // 获取今天是周几
    let thisWeekDay = date.getDay()
    // 获取今天日期
    let thisDay = date.getDate()
    // 获取今年的年份
    let thisYear = date.getFullYear()
    // 获取月份
    let thisMonth = date.getMonth() + 1
    // 测试处理数据加零
    if (thisMonth < 10) {
        thisMonth = `0${thisMonth}`
    } else {
        thisMonth = new Date().getMonth() + 1
    }
    // 距离一周结束还有几天
    let diffNum = (7 - thisWeekDay)
    // 在今天日期之前已经过了几天了 (最小范围)
    let pastNum = (thisDay - thisWeekDay) + 1
    // 这一周还剩的天数 (最大范围)
    let willingNum = (thisDay + diffNum)
    items.value.forEach(item => {
        // 获取用户记录该事项时的年份
        let remberYear = item.time.split('-')[0]
        // 获取用户记录该事项时的月份
        let remberMonth = item.time.split('-')[1]
        // 获取用户记录该事件的日期
        let remberDay = item.time.split('-')[2].split('T')[0]
        if (remberDay < 10) {
            remberDay = remberDay.split('0')[1]
        } else {
            remberDay = remberDay
        }
        // 对数据进行统一类型 方便后面进行判断
        let intPastNum = parseInt(pastNum)
        let intWillingNum = parseInt(willingNum)
        let intRemberDay = parseInt(remberDay)
        // 过滤本周数据
        if (thisYear.toString() === remberYear && thisMonth.toString() === remberMonth && intPastNum <= intRemberDay && intRemberDay <= intWillingNum) {
            tmpArrWeek.push(item)
        }
    })
    localStorage.setItem('weeks', JSON.stringify(tmpArrWeek))
    items.value = JSON.parse(localStorage.getItem('weeks'))
}
// 查询近一年的事件
function findYear() {
    // 重新读取数据
    items.value = JSON.parse(localStorage.getItem('things'))
    // 临时数组
    let tmpArrYear = []
    // 实例日期对象
    let date = new Date()
    // 获取今年的年份
    let thisYear = date.getFullYear()
    items.value.forEach(item => {
        // 获取用户记录该事项时的年份
        let remberYear = item.time.split('-')[0]
        // 将字符串转为数值类型
        let intRemberYear = parseInt(remberYear)
        let intThisYear = parseInt(thisYear)
        // 过滤近一年数据
        if (intRemberYear === intThisYear) {
            tmpArrYear.push(item)
        }
    })
    localStorage.setItem('years', JSON.stringify(tmpArrYear))
    items.value = JSON.parse(localStorage.getItem('years'))

}
// 查询今天的事件
function findToday() {
    // 重新读取数据
    items.value = JSON.parse(localStorage.getItem('things'))
    // 临时数组
    let tmpArrToDay = []
    // 实例日期对象
    let date = new Date()
    // 获取今天日期
    let thisDay = date.getDate()
    // 获取今年的年份
    let thisYear = date.getFullYear()
    // 获取月份
    let thisMonth = date.getMonth() + 1
    // 测试处理数据加零
    if (thisMonth < 10) {
        thisMonth = `0${thisMonth}`
    } else {
        thisMonth = new Date().getMonth() + 1
    }
    items.value.forEach(item => {
        // 获取用户记录该事项时的年份
        let remberYear = item.time.split('-')[0]
        // 获取用户记录该事项时的月份
        let remberMonth = item.time.split('-')[1]
        // 获取用户记录该事件的日期
        let remberDay = item.time.split('-')[2].split('T')[0]
        if (remberDay < 10) {
            remberDay = remberDay.split('0')[1]
        } else {
            remberDay = remberDay
        }
        // 对数据进行统一类型 方便后面进行判断
        let intYear = parseInt(remberYear)
        let intMonth = parseInt(remberMonth)
        let intDay = parseInt(remberDay)
        // 对今天数据进行数字类型处理
        let intThisDay = parseInt(thisDay)
        let intThisYear = parseInt(thisYear)
        let intThisMonth = parseInt(thisMonth)
        // 过滤今天数据
        if (intThisDay === intDay && intThisYear === intYear && intMonth === intThisMonth) {
            tmpArrToDay.push(item)
        }
    })
    localStorage.setItem('day', JSON.stringify(tmpArrToDay))
    items.value = JSON.parse(localStorage.getItem('day'))

}
</script>
<style>
body {
    padding: 0px;
    margin: 0px;
    background-color: #eee;

}

#outDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#userInput {
    width: 80%;
    height: 60px;
    border: none;
    outline: none;
    border-radius: 10px;
}

.contentDiv {
    margin-top: 30px;
    width: 80%;
    /* 高度自适应样式 */
    min-height: 120px;
    /* 滚动条样式 */
    /* height: 120px; */
    /* overflow: auto; */
    border-radius: 10px;
    background-color: #ffffff;
}

.down {
    display: flex;
    margin-top: 30px;
    width: 80%;
    height: 40px;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    font-family: cursive;
    text-shadow: 2px 2px 2px lightcoral;
}

h1 {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    font-family: cursive;
}

.todo {
    color: black;
    font-family: cursive;
    font-weight: 900;
}

.doit {
    color: gray;
    text-decoration: line-through;
    font-family: cursive;
    font-weight: 900;
}

/* 禁止 span p 标签点击 */
.unclick {
    pointer-events: none;
}

p:hover {
    background-color: pink;
}

p {
    height: 25px;
    line-height: 25px;
}

.del {
    position: absolute;
    right: 12%;
    letter-spacing: 5px;
}

.list {
    width: 80%;
    height: 10px;

    display: flex;
    justify-content: space-around;

    position: fixed;
    z-index: 9999;

}

.list span {
    width: 75px;
    height: 30px;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    text-shadow: 2px 2px 2px lightcoral;
    font-family: cursive;
    border-radius: 10px;
    text-align: center;
    letter-spacing: 2px;
    line-height: 30px;
    opacity: 0.4;
}
</style>